<style type="text/css">
    .c-desktop-logo{background: url("{logoFileInner}");background-size: cover;}
    .c-page-on-scroll .c-desktop-logo{background: url("{logoFile}");background-size: cover;}
    @media (min-width: 992px){
        .c-page-on-scroll .c-layout-header.c-layout-header-4 {
            position: fixed !important;
        }
    }
    @media (min-width: 992px){
        .c-page-on-scroll .c-layout-header.c-layout-header-4 .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-btn-icon, .c-page-on-scroll .c-layout-header.c-layout-header-4 .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link {
            color: #fff;
        }
    }
    .c-page-on-scroll .c-layout-header.c-layout-header-4{background: rgba(0,0,0,.7); border-bottom: none;}

</style>
<header class="c-layout-header c-layout-header-4 c-layout-header-default-mobile" data-minimize-offset="80" style="position: relative;">
    <div class="c-navbar">
        <div class="container-fluid">
            <!-- BEGIN: BRAND -->
            <div class="c-navbar-wrapper clearfix">
                <div class="c-brand c-pull-left">
                    <f:link.page pageUid="{rootPage}" class="c-logo">
                        <div class="c-desktop-logo">
                            <img src="{logoFile}" style="max-height:40px;visibility: hidden;" alt="{siteTitle}" title="{siteTitle}" class="c-desktop-logo"/>
                        </div>
                    </f:link.page>
                    <button class="c-hor-nav-toggler" type="button" data-target=".c-mega-menu">
                        <span class="c-line"></span>
                        <span class="c-line"></span>
                        <span class="c-line"></span>
                    </button>
                    <button class="c-topbar-toggler" type="button">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                    <button class="c-search-toggler" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
                <!-- END: BRAND -->
                <!-- BEGIN: QUICK SEARCH -->
               <form class="c-quick-search" method="post" action="search.html">
                    <input type="hidden" name="tx_indexedsearch_pi2[action]" value="search" />
                    <input type="hidden" name="tx_indexedsearch_pi2[controller]" value="Search" />
                    <input type="hidden" name="cHash" value="0" />

                    <input type="hidden" name="tx_indexedsearch_pi2[search][_sections]" value="0" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][_freeIndexUid]" value="_" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][pointer]" value="0" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][ext]" value="" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][searchType]" value="1" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][defaultOperand]" value="0" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][mediaType]" value="-1" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][sortOrder]" value="rank_flag" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][group]" value="" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][languageUid]" value="sys_language_uid}" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][desc]" value="" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][numberOfResults]" value="10" />
                    <input type="hidden" name="tx_indexedsearch_pi2[search][extendedSearch]" value="" />
                    <input type="text" name="tx_indexedsearch_pi2[search][sword]" value="{searchKeyword}" placeholder="{f:translate(key:'LLL:typo3conf/ext/website/Resources/Language/locallang.xml:searchPlaceholder')}" class="form-control" autocomplete="off"/>
                    <span class="c-theme-link">&times;</span>
                </form>
                <!-- END: QUICK SEARCH -->
                <!-- BEGIN: HOR NAV -->
                <!-- BEGIN: LAYOUT/HEADERS/MEGA-MENU -->
                <!-- BEGIN: MEGA MENU -->
                <!-- Dropdown menu toggle on mobile: c-toggler class can be applied to the link arrow or link itself depending on toggle mode -->
                <nav class="c-mega-menu c-pull-right c-mega-menu-light c-mega-menu-light-mobile c-fonts-uppercase c-fonts-bold">
                    <ul class="nav navbar-nav c-theme-nav">
                        <f:cObject typoscriptObjectPath="lib.navigation.main"/>
                        <li class="c-search-toggler-wrapper">
                            <a href="#" class="c-btn-icon c-search-toggler">
                                <i class="fa fa-search"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div style="display: none;">
                    
                </div>
                <!-- END: MEGA MENU -->
                <!-- END: LAYOUT/HEADERS/MEGA-MENU -->
                <!-- END: HOR NAV -->
            </div>
        </div>
    </div>
</header>
